<template>
<div>
    <!-- 导航栏 -->
  <mt-header title="景点门票" >
  <router-link to="/" slot="left">
    <mt-button icon="back">返回</mt-button>
  </router-link>
  <mt-button  slot="right" >
      <router-link to="/">首页</router-link>
  </mt-button>
</mt-header>
<!-- 搜索框-->
<mt-search
  cancel-text="搜索"
  placeholder="搜索"
  :autofocus='true'
  style="font-size:50%">
</mt-search>
<!--不同类别-->
<div class="threeClass" @click="change">
    <div>全部地区</div>
    <div>主题类型</div>
    <div>官方推荐</div>
</div>
<mt-tab-container v-model="active" >
  <mt-tab-container-item id="tab-container1" 
   infinite-scroll-distance="20"
     v-infinite-scroll="toload"
     infinite-scroll-disabled="busy"
     :infinite-scroll-immediate-check="true">
      <jing-dian></jing-dian>
  </mt-tab-container-item>
  <mt-tab-container-item id="tab-container2" >
    <mt-cell v-for="(ele,i) of arr1" :key="i" :title="ele" @click.native.capture="test"></mt-cell>
  </mt-tab-container-item>
  <mt-tab-container-item id="tab-container3">
    <mt-cell v-for="(ele,i) in arr2" :title="ele" :key="i" @click.native.capture="test"></mt-cell>
  </mt-tab-container-item>
</mt-tab-container>


</div>


</template>
<script>
import JingDian from  '@/components/home/pages/JingDian.vue'
import BottomInfo from  '@/components/home/pages/BottomInfo.vue'
import {Indicator} from 'mint-ui'
export default {
    components:{JingDian,BottomInfo},
    data(){
        return {
            active:'tab-container1',
            arr1:["山水景观", "温泉", "主题乐园", "海滨岛屿", "古镇村落", "古迹遗址", "田园度假", "动植物园", "主题体验", "都市观光", "湿地", "园林", "博物馆", "游船", "公园陵园", "宗教", "拓展", "民俗文化", "潜水", "森林公园", "特色街区", "漂流", "世遗场馆", "演艺", "骑马", "夜景", "邮轮", "农家乐", "滑雪", "美食", "探险", "草原沙漠", "动漫", "艺术", "徒步", "红色游", "溶洞", "垂钓", "瀑布", "采摘"],
            arr2:["官方推荐","价格从高到低","价格从低到高","星级","点评数"],
            busy:false,
            num:10,
        }
    },
    methods:{
        change(e){
            if(e.target.innerHTML=='全部地区'||'主题类型'||'官方推荐'){
                   for(var ele of e.target.parentElement.children){
                    ele.className='';
                }
                e.target.className='changebs';
            }
            if(e.target.innerHTML=='全部地区'){
                this.active = 'tab-container1';
            }else if(e.target.innerHTML=='主题类型'){
                  this.active = 'tab-container2'
            }else if(e.target.innerHTML=='官方推荐'){
                    this.active = 'tab-container3'
            }
        },
       test(){
           console.log(2222);
           console.log(0)
       },
       toload(){
           this.busy=true;
          
             setTimeout(()=>{
                this.num+=5;
                this.busy = false;
            },2000)
       }
    },
    mounted(){
    }
}
</script>
<style scoped>

.mint-search{
    height: 100%
}
.threeClass{
    margin-top: 10px ;
    margin-bottom:10px; 
    display: flex;
    justify-content: space-around;
    color: #555;
    position: relative;
}
.threeClass div{
    font-size: 25px;
    top: 0;
    bottom: 0;
    text-align: center;
    flex: 0 0 33.3%;
    border-radius: 20%
}
.threeClass div:active{
    background-color: lightgreen;
    
}
.changebs{
    box-shadow:1px 1px 4px 1px black;
    
}
.contenttype div{
    text-align: left ;
}
</style>

